<template>
  <div ref="pieChart11" class="pie-chart-11 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart11 = ref(null);
const echarts = inject("$echarts");

let seriesData= [
  { value: 38, name: '娄葑街道', itemStyle: { color: '#00A2FF' } },
  { value: 20, name: '斜塘街道', itemStyle: { color: '#00FEDD' } },
  { value: 19, name: '唯亭街道', itemStyle: { color: '#ffffff' } },
  { value: 21, name: '胜浦街道', itemStyle: { color: '#FFEC4D' } },
  { value: 16, name: '金鸡湖街道', itemStyle: { color: '#0060FF' } }
]
const option = {
  compCode: 'C202309018',
  backgroundColor: '#000',
  tooltip: {
    trigger: 'item',
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
  },
  legend: {
    orient: 'vertical',
    icon: 'circle', // 将图标样式设置为圆形
    x: '65%',
    y: 'center',
    itemWidth: 7,
    itemHeight: 15,
    itemGap: 13,
    align: 'left',
    textStyle: {
      rich: {
        name: {
          fontSize: 12,
          color: '#D4EBF0',
          align: 'left',
          width:60
        },
        value: {
          fontSize: 14,
          color: '#fff',
          padding: [0, 5, 0, 20],
          align: 'left',
          fontFamily: 'DIN'
        },
        unit: {
          fontSize: 12
        }
      }
    },
    formatter: (name) => {
      let res = seriesData.filter(v => v.name === name);
      res = res[0] || {};
      let unit = res.unit || '';
      return '{name|' + name + '}  {value|' + res.value + '} ';
    },

  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '50%',
      center: ['28%', '50%'],
      data: seriesData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: (params) => {
          let res = seriesData.find(v => v.name === params.name);
          return ((res.value/114)*100).toFixed(2) +'%';
        },
        textStyle: {
          color: '#fff', // 标签字体颜色为白色
          fontSize: 14 // 标签字号为 14px
        }
      }
    }
  ]
};

onMounted(() => {
  const chart = echarts.init(pieChart11.value);
  chart.setOption(option);
});
</script>
